<template>
  <div class="admin-wiki-edit">
    <el-container class="admin-wiki-edit" v-loading="loading">
      <el-aside width="300px" style="background: #fff;">
        <left @change="change" @editWiki="editWiki" ref="leftMenu" :viewModel="viewModel" v-if="viewModel"></left>
      </el-aside>
      <el-container ref="elContainer">
        <right @change="change" :height="height" ref="editArea"></right>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import left from './styles/left'
  import right from './styles/right'
  import ala from 'ala'

  export default {
    components: {
      left,
      right
    },
    data () {
      return {
        height: 0,
        viewModel: null,
        loading: true
      }
    },
    mounted () {
      this.height = this.$refs.elContainer.$el.offsetHeight - 100
      this.init()
    },
    methods: {
      async init () {
        this.loading = true
        this.viewModel = await this.$admin.wikiTree()
        var first = this.viewModel.wikis[0]
        await this.editWiki(this.viewModel.wikis[0])
        this.loading = false
      },
      // 删除添加，编辑是发生改变
      change (data,wikiAdd) {
        this.viewModel.wikis = data
        if (wikiAdd) { 
          this.editWiki(wikiAdd)  
        }
        this.$forceUpdate()
      },
      // 编辑事件
      editWiki (data) {
        this.$nextTick(async () => {
          if (this.$refs.editArea) {
            await this.$refs.editArea.init(data)
          }
        })
      }
    }
  }
</script>



<style lang="scss" scoped>
  @import "./var.scss";
</style>

